<template>
	<view class="test-page">
		<view class="name">{{content.title}}</view>
		<view class="title1" style="margin:0 auto;text-align:center;font-size:32rpx;color:#555555;">本次共答对：{{count}}题  总得分：<span style="color:#1783dd">{{fen}}分</span></view>
		<scroll-view  scroll-y="true" class="scroll-Y" >
			<view class="reContent">
				<view class="select-item" v-for="(item,index) in list">
					<view class="zhe"></view>
					<view class="top">
						<span class="index">{{index+1}}</span>
						<span class="text" v-html="item.content"></span>
						<span class="type" v-show="item.examType=='1'">单选</span>
						<span class="type" v-show="item.examType=='2'">多选</span>
						<span class="type" v-show="item.examType=='3'">填空</span>
						<span class="type" v-show="item.examType=='4'">判断</span>
						<span class="type" v-show="item.examType=='5'">简答</span>
						<view style="clear:both"></view>
					</view>
					<view class="radio-box" v-show="item.examType=='1' || item.examType=='4'">
						<radio-group @change="radioChange($event,index)" >
							<view class="main-data">
								<span class="item" v-for="(item1, index1) in item.educationExamOptionList" :key="index1">
									<radio :value="item1.label" :checked="item.answer === item1.label" color="#1783dd" style="transform: scale(0.9)"/>
									<span class="text">{{item1.label}}</span>
									<span class="text" style="color:#1783dd">{{item1.content}}</span>
								</span>
							</view>		
						</radio-group>
					</view>
					<view class="radio-box" v-show="item.examType=='2'">
						<checkbox-group @change="checkboxChange($event,index)">
							<view class="main-data">
								<span class="item" v-for="(item1, index1) in item.educationExamOptionList" :key="index1">
									<checkbox :value="item1.label" :checked="item1.checked" color="#1783dd"/>
									<span class="text">{{item1.label}}</span>
									<span class="text" style="color:#1783dd">{{item1.content}}</span>
								</span>
							</view>
						</checkbox-group>
					</view>
					<view class="radio-box" v-show="item.examType=='3' || item.examType=='5'">
						<textarea v-model="item.answer" :auto-height="true" class="main-textarea" placeholder="请输入答案" maxlength="-1"></textarea>
					</view>
					<view class="yes" style="line-height:40rpx;margin:30rpx 0;color:#666666;font-size:30rpx;">正确答案：{{item.yesAnswer}}</view>
				</view>
			</view>
			
		</scroll-view>
		<view class="submit" @tap="back" v-show="!loading">返回</view>
		<view class="backhome iconfont iconshouye-yes" @tap="$gohome"></view>
		<!-- <view class="submit"  v-show="loading">数据提交中...</view> -->
	</view>
</template>

<script>
	export default {
		components:{
			
		},
		data() {
			return {
				time:"",
				content:{},
				list:[

				],
				loading:false,
				count:null,
				fen:null,
				id:'',
				userPaperId:'',
			}
		},
		onLoad(obj) {
			this.id = obj.id;
			//uni.showLoading();
			this.getList()	
		},
		methods: {
			getList(){
				let that = this;
				this.$http.get("/f/listUserExamRecord?userPaperId="+this.id)
	            .then(function (response) {
	            	console.log(response,999)
	            	that.fen = response.data.educationPaperCount.userScore;
        			that.count = response.data.educationPaperCount.correctCount;
	                that.content = response.data.educationPaper;
	                let list = response.data.EducationPaperExamList;
	                if(list.length!=0){
	                	list.forEach((item,i)=>{
	                		item.answer = "";
	                		item = Object.assign(item,item.educationExam);
	                		let arr = [];
	                		item.educationExamAnswerList.forEach((item1,index1)=>{
	                			arr.push(item1.answer);
	                		})
	                		if(item.examType=="1" || item.examType=="4" || item.examType=="3"){
	                			let arr1 = item.userAnswer.split(",");
	                			item.answer = item.userAnswer;
	                		}
	                		if(item.examType=="2"){
	                			let arr1 = item.userAnswer.split(",");
	                			item.educationExamOptionList.forEach((item1,i1)=>{
	                				arr1.forEach((item2,i2)=>{
	                					if(item2==item1.label){
	                						item1.checked=true;
	                					}
	                				})
	                			})
	                		}
	                		item.yesAnswer = arr.join(",");
	                		
	                	})
	                }
	                console.log(list,333)
	                that.list = list;
	                uni.hideLoading();
	            })
	            .catch(function (error) {
	                // handle error
	                console.log(error);
	            })
			},
			goCenter(item){
				uni.navigateTo({
					url:'main'
				})
			},
			radioChange(e,index){
				this.list[index].answer = e.detail.value;
				console.log(e,index)
			},
			checkboxChange(e,index){
				this.list[index].answer = e.detail.value.join("|");
			},
			submit(type){
				let that = this;
				let arr1 = [];
				let arr2 = [];
				this.list.forEach((item,i)=>{
					arr1.push(item.id);
					arr2.push(item.answer);
				})
				uni.showLoading({
					title:'问卷提交中...',
					mask:true
				})
				this.loading = true;
				let obj = {
					userPaperId:this.userPaperId,
					examIdList:arr1,
					userAnswerList:arr2
				}
				this.$http.post("/f/exam/datiques",obj)
	            .then(function (response) {
	                uni.showToast({
						title:'您的问卷已提交',
						iconfont:'success'
					})
					setTimeout(()=>{
						that.back();
					},500)
	            })
	            .catch(function (error) {
	                // handle error
	                console.log(error);
	                that.loading = false;
	            })
				
			},
			back(){
				uni.navigateBack({
				    delta: 2
				});
			},
			startTime() {
			    var today = new Date();
			    var h = today.getHours();
			    var m = today.getMinutes();
			    var s = today.getSeconds();
			    // 在 numbers<10 的数字前加上 0
			    m = this.checkTime(m);
			    s = this.checkTime(s);
			    this.time = h + ":" + m + ":" + s;
			    setTimeout(()=>{
			    	this.startTime();
			    },1000)
			    
			},
			checkTime(i) {
			    if (i < 10) {
			        i = "0" + i;
			    }
			    return i;
			},
			datechange(e){
				console.log(e)
			}
		}
	}
</script>

<style lang="less">
	.test-page{
		width:100%;
		height:100%;
		position:relative;
		overflow:hidden;
		background:#f5f5f5;
		.submit{
			position:absolute;
			bottom:40rpx;
			width:280rpx;
			height:70rpx;
			line-height:70rpx;
			text-align:center;
			font-size:30rpx;
			color:#ffffff;
			border-radius:10rpx;
			background:#1783dd;
			left:235rpx;
			z-index: 99;
		}
		.scroll-Y{
			width:100%;
			height:calc(100% - 90rpx);
		}
		.reContent{
			width: 100%;
			padding-bottom: 60rpx;
			.select-item{
				width:calc(100% - 40rpx);
				box-sizing:border-box;
				margin:0 auto;
				margin-top:40rpx;
				background:#ffffff;
				padding:20rpx 30rpx;
				border-radius:10rpx;
				position:relative;
				.zhe{
					position:absolute;
					left:0;
					top:0;
					width:100%;
					height:100%;
					z-index:9;
				}
				.radio-box{
					width:100%;
					margin:40rpx 0;
					margin-bottom:0rpx;
					.main-textarea{
						width:calc(100% - 40rpx);
						line-height:40rpx;
						display:flex;
						min-height:120rpx;
						background:#f5f5f5;
						font-size:28rpx;
						color:#888888;
						padding: 20rpx;
						margin-bottom:20rpx;
					}
					.main-data{
						width:100%;
						display:flex;
						flex-wrap:wrap;
						.item{
							margin-right:30rpx;
							display:flex;
							align-items:center;
							margin-bottom:30rpx;
							.text{
								font-size:30rpx;
								color:#666666;
								margin-left:10rpx;
							}
						}
					}
					.uni-list-cell{
						width:auto;
					}
				}
				.top{
					width:100%;
					position:relative;
					.type{
						line-height:60rpx;
						right:0;
						font-size:30rpx;
						color:#1783dd;
						position:absolute;
						top:0;
					}
					.index{
						width:60rpx;
						height:60rpx;
						border-radius:50%;
						background:#1783dd;
						line-height:60rpx;
						text-align:center;
						font-size:28rpx;
						color:#fff;
						margin-right:20rpx;
						float:left;
					}
					.text{
						font-size:32rpx;
						color:#555555;
						float:left;
						width:calc(100% - 160rpx);
						display:block;
						line-height:40rpx;
						margin-top:10rpx;
						word-break: break-all;
					}
				}
			}
		}
		
		.select-item:last-child{
			margin-bottom:120rpx;
		}
		.name{
			display:block;
			text-align:center;
			line-height:90rpx;
			font-size:36rpx;
			color:#444444;
		}
	}
</style>
